<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-grid.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
    <!--图标库-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <link rel='stylesheet' type="text/css" th:href="@{/css/style_sldieshow.css}"/>
</head>
<body>
<div class="layuimini-container">
    <div id="mydiv" class="layuimini-main" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片：</label>
                <div class="layui-upload-drag" id="test10">
                    <i class="layui-icon"></i>
                    <p>点击上传预览图</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div>
                </div>
            </div>
            <br/><br/>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文字内容：</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tijiao">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </form>
    </div>
</div>


<div class="layuimini-container">
    <div id="mydivs" class="layuimini-main" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片：</label>
                <div class="layui-upload-drag" id="test11">
                    <i class="layui-icon"></i>
                    <p>点击上传预览图</p>
                    <div class="layui-hide" id="uploadview">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div>
                </div>
            </div>
            <br/><br/>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文字内容：</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tijiao_wql">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </form>
    </div>
</div>




<div class="container">
    <div class="row">
    <div class="col-md-12  col-md-offset-2" style="text-align: center">

            <span style="font-weight:bold;font-style: italic;font-size: 35px">
                轮播图设置
            </span>
        <button id="add_" type="button" class="layui-btn layui-btn-sm layui-btn-radius">
            <i class="layui-icon" >&#xe608;</i> 添加
        </button>
    </div>
    </div>
    <div class="row">

        <div th:each="slideshows,item :${slideshow}" class="col-md-4 col-sm-6" style="margin-top:14px;">
            <div class="box">
                <img th:src="@{${slideshows.image_path_url}}">
                <div class="box-content">
                    <h3 class="title">五昊科技</h3>
                    <span th:text="${slideshows.image_information}" class="post fq_fq"></span>
                </div>
                <ul class="icon">
                    <li id="huan"><a href="#"><i>换</i></a></li>
                    <li id="shan"><a href="#"><i>删</i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script type="application/javascript">

    layui.use(['form', 'layedit','upload','jquery','layer'], function () {
        var $=layui.jquery;
        var form=layui.form;
        var upload = layui.upload;
        var image_path_url;
        var image_information;
        upload.render({
            elem: '#test10'
            ,url: '/upload_image' //改成您自己的上传接口
            ,done: function(res){
                $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', '/layuimini/image_out/'+res.imagefile_path);
            }
        });
        upload.render({
            elem: '#test11'
            ,url: '/upload_image' //改成您自己的上传接口
            ,done: function(res){
                $('#uploadview').removeClass('layui-hide').find('img').attr('src', '/layuimini/image_out/'+res.imagefile_path);
            }
        });
        $(document).on('click','#shan',function(){
            image_path_url =$(this).parent().prev().prev().attr("src");
            layer.open({
                type: 0,
                icon:3,
                skin:"layui-layer-molv",
                content:"确定要删除吗？",
                btn:['确定','退出'],
                yes:function (index,layero) {

                    $.ajax({
                        url:"/delete_slideshow",
                        type:"post",
                        dataType:"json",
                        anim:1,
                        data:{
                            image_path_url_old:image_path_url,
                        },
                        success:function (dat) {
                            if( dat.statecode == 200 ){
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    history.go(0);
                                })
                            }
                        }
                    })
                },
        })})


        $(document).on('click','#add_',function(){
            layer.open({
                type: 1,
                content: $("#mydiv"),
                area: ['500px', '400px'],
                resize:false
            });})

        $(document).on('click','#huan',function(){
            image_path_url =$(this).parent().prev().prev().attr("src");
            layer.open({
                type: 1,
                content: $("#mydivs"),
                area: ['500px', '400px'],
                resize:false
            });})


        form.on("submit(tijiao)",function (datas) {
            var src=$('#uploadDemoView').find("img").attr("src");
            $.ajax({
                url:"/add_slideshow",
                type:"post",
                dataType:"json",
                data:{
                    image_path_url:src,
                    image_information:datas.field.desc,
                },
                success:function (dat) {
                    if( dat.statecode == 200 ){
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            history.go(0);
                        })
                }
            }})
                    return false;
        })


        form.on("submit(tijiao_wql)",function (datas) {
            var src=$('#uploadview').find("img").attr("src");
            $.ajax({
                url:"/update_slideshow",
                type:"post",
                dataType:"json",
                data:{
                    image_path_url_new:src,
                    image_path_url_old:image_path_url,
                    image_information:datas.field.desc,
                },
                success:function (dat) {
                    if( dat.statecode == 200 ){
                        layer.msg('更新成功', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            history.go(0);
                        })
                    }
                }})
            return false;
        })



    })
</script>
</body>
</html>